<template>
  <div class="login-main">
    <Back @back="back"/>
    <div class="login-header">
      <van-image class="banner" round src="http://www.wennn.top:8802/static/images/nl.jpg"/>
    </div>
    <div class="login-body">
      <div class="title">
        <span>账号注册</span>
      </div>
      <div class="inputs">
        <van-field left-icon="user-o" v-model="username" placeholder="账号" input-align="left"/>
        <van-field
          left-icon="smile-o"
          v-model="password"
          type="password"
          placeholder="密码"
          input-align="left"
        />
        <van-field
          left-icon="smile-o"
          v-model="repassword"
          type="repassword"
          placeholder="确认密码"
          input-align="left"
        />
      </div>
      <div class="inputs">
        <van-field
          left-icon="phone-o"
          v-model="phone"
          type="tel"
          placeholder="手机号码"
          input-align="left"
        />
        <van-field v-show="false" v-model="sms" center clearable label="验证码" placeholder="请输入验证码">
          <template #button>
            <van-button size="small" type="primary">发送验证码</van-button>
          </template>
        </van-field>
      </div>
      <div class="login-btn">
        <van-button type="primary" @click="register" round block>注册</van-button>
      </div>
      <div class="help">
        <a class="regist btn" @click="$router.push({ path: 'login',query:{lp:'register'} })">已有账号，马上登陆</a>&nbsp;&nbsp;
      </div>
    </div>
    <div class="login-bottom"></div>
  </div>
</template>

<script>
import Back from "@/components/public/Back";
import { vuexData } from "@/assets/js/mixin";

export default {
  name: "Login",
  mixins: [vuexData],
  data() {
    return {
      username: "",
      password: "",
      repassword: "",
      phone: "",
      timer: 0,
      regLoding: false,
      sms:'',
    };
  },
  components: {
    Back
  },
  methods: {
    async register() {
      if (!this.username) {
        this.$toast("请输入用户名");
        return;
      }
      if (!this.password) {
        this.$toast("请输入密码");
        return;
      }
      if (this.password != this.repassword) {
        this.$toast("两次输入密码不一致");
        return;
      }

      // if (!this.verifyTxt) {
      //   this.$toast("请输入验证码");
      //   return;
      // }
      // if (this.verifyTxt.length < 4) {
      //   this.$toast("请输入正确的验证码");
      //   return;
      // }

      if (
        !this.phone ||
        this.phone.length != 11 ||
        !/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone)
      ) {
        return this.$toast("请输入正确的手机号");
      }
      //  注册
      try {
        this.regLoding = true;
        const { data,code,msg } = await this.Api.registerN({
          username:this.username,
          password:this.password,
          phone:this.phone
        });
        if (code == 200) {
          this.setName(data);
          // this.setToken(data.token)
          setTimeout(() => {
            this.$router.push({path:'login'})
          }, 1500);
        }
        msg&&this.$toast(msg);
        this.regLoding = false;
      } catch (error) {
        this.$toast("网络错误");
        this.regLoding = false;
      }
    },

    // 发送验证码
    async sendCode() {
      try {
        if (
          !this.phone ||
          this.phone.length != 11 ||
          !/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone)
        ) {
          return this.$toast("请输入正确的手机号");
        }
        const { data } = await this.Api.codeMsg(this.phone);
        if (data.code == 200) {
          this.dataTimer = 60;
          let t = setInterval(() => {
            if (this.dataTimer <= 0) {
              this.retry = "";
              clearInterval(t);
              return;
            }
            this.retry = this.dataTimer--;
          }, 1000);
        } else if (data.code == -2) {
          let t = setInterval(() => {
            if (data.timer <= 0) {
              this.retry = "";
              clearInterval(t);
              this.dataTimer = 60;
              return;
            }
            this.retry = data.timer--;
          }, 1000);
        }
        this.$toast(data.msg);
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.login-main {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#00c17b),
    to(#00c17b)
  );
  background-image: linear-gradient(180deg, #00c17b 0, #00c17b);
  background-image: -moz-linear-gradient(to bottom, #00c17b 0, #00c17b 100%);
  width: 100%;
  height: 100vh;
  .login-header {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    .banner {
      width: 2.86rem;
      height: 2.86rem;
    }
  }
  .login-body {
    width: 9rem;
    border-radius: 0.16rem;
    background-color: #fff;
    margin: 0.3rem auto 0 auto;
    padding: 0.45rem 0.3rem 0 0.3rem;
    .title {
      text-align: center;
      font-size: 0.55rem;
      span {
        border-bottom: 0.07rem solid #d28585;
        padding: 3px 5px;
        display: inline-block;
      }
    }
    .inputs {
      .van-cell.van-field {
        font-size: 0.45rem;
        .van-icon {
          font-size: 0.55rem;
        }
      }
    }
    .login-btn {
      padding: 0.5rem 0;
      button {
        font-size: 0.5rem;
      }
    }
    .help {
      height: 0.43rem;
      padding: 0.3rem 0px;
      .btn {
        text-decoration: none;
        font-size: 0.4rem;
        color: #e29292;
        &:hover {
          color: #00c17b;
        }
      }
      .regist {
        float: right;
      }
      .phone-login {
        float: left;
      }
    }
  }
}
</style>

